<template>
    <div>
        <Navbar></Navbar>
        <component :is="which" />
        <keep-alive include="home,list">
            <component :is="which" />
        </keep-alive>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Navbar from './Navbar.vue'
import Tabbar from './Tabbar.vue'
// 注意: 异步组件使用defineAsyncComponent导入,不要用import直接导入
// import Home from './views/Home.vue'
// import List from './views/List.vue'
// import Center from './views/Center.vue'
import store from './store'
import { defineAsyncComponent } from 'vue'
// 导入正在加载中页面的组件
import LoadingComponent from './views/LoadingComponent.vue'
//导入加载超时页面的组件
import ErrorComponent from './views/ErrorComponent.vue'

export default {
    data() {
        return {
            which: 'Home'
        }
    },
    //异步组件: 使用 defineAsyncComponent  导入的组件, 在项目首次加载时并不会加载,用户什么时候点击该组件,该组件什么时候加载
    components: {
        Navbar,
        Tabbar,
        Home: defineAsyncComponent(() => import('./views/Home.vue')),
        List: defineAsyncComponent(() => import('./views/List.vue')),
        Center: defineAsyncComponent(() => import('./views/Center.vue')),

        Center: defineAsyncComponent({
            loader: () => import('./views/Center.vue'),

            //加载异步组件时使用的组件 注意,需要先import导入
            loadingComponent: LoadingComponent,
            //展示加载组件前的延时时间,默认为200ms
            delay: 200,

            //加载失败后展示的组件
            errorComponent: ErrorComponent,
            //时间限制,当加载时间超过时间限制显示的组件,失败
            timeout: 3000,
        })



    },

    mounted() {
        let obj = {   //映射表
            '首页': 'Home',
            '列表': 'List',
            '我的': 'Center',
        }
        store.subscribe((value) => {
            this.which = obj[value]
        })
    },
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}
</style>